<template>
  <div class="main-div">
    <el-container>
      <div>
        <el-aside width="100px" class="aside">
          <div>

            <el-menu active-text-color="#ffffff" text-color="#999999" background-color="#333333" @select="handleSelect"
              style="font-weight: bold;">
              <el-menu-item index="1" class="menu-item" @click="$router.push('/main/')">
                <template slot="title">首页</template>
              </el-menu-item>
              <el-menu-item index="2" class="menu-item">
                <template slot="title">业务</template>
              </el-menu-item>
              <el-menu-item index="3" class="menu-item">
                <template slot="title">财务</template>
              </el-menu-item>
              <el-menu-item index="4" class="menu-item">
                <template slot="title">运营</template>
              </el-menu-item>
              <el-menu-item index="5" class="menu-item">
                <template slot="title">内容</template>
              </el-menu-item>
              <el-menu-item index="6" class="menu-item">
                <template slot="title">设置</template>
              </el-menu-item>
            </el-menu>
          </div>
          <div>
            <el-menu active-text-color="#999999" text-color="#999999" background-color="#333333">
              <el-menu-item index="7" style="margin-top:100px;">
                <template slot="title">{{ user.name }}</template>
              </el-menu-item>
              <el-menu-item index="8" @click="logout">
                <template slot="title">退出</template>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>
      </div>

      <div class="sub-menu" v-if="index == 1">
        <el-menu active-text-color="#4885f6" text-color="#999999" background-color="#ebedf1">
          <div class="name-div">
            <div style="padding-top:12px;">系统首页</div>
          </div>
          <el-menu-item index="9" class="submenu-item font" @click="$router.push('/main/')">
            <template slot="title">系统首页</template>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="sub-menu2" v-if="index == 2">
        <el-menu active-text-color="#4885f6" text-color="#999999" background-color="#ebedf1">
          <div class="name-div">
            <div style="padding-top:12px;">用户管理</div>
          </div>
          <el-menu-item index="10" class="submenu-item font" @click="$router.push('/main/consumerRegister')">
            <template slot="title">用户注册</template>
          </el-menu-item>
          <el-menu-item index="11" class="submenu-item font" @click="$router.push('/main/personalInvestment')">
            <template slot="title">个人投资用户</template>
          </el-menu-item>
          <el-menu-item index="12" class="submenu-item font" @click="$router.push('/main/corporateInvestment')">
            <template slot="title">企业投资用户</template>
          </el-menu-item>
          <el-menu-item index="13" class="submenu-item font" @click="$router.push('/main/personalLoan')">
            <template slot="title">个人借款用户</template>
          </el-menu-item>
          <el-menu-item index="14" class="submenu-item font" @click="$router.push('/main/corporateLoan')">
            <template slot="title">企业借款用户</template>
          </el-menu-item>
          <el-menu-item index="15" class="submenu-item font" @click="$router.push('/main/personalGuarantee')">
            <template slot="title">个人担保用户</template>
          </el-menu-item>
          <el-menu-item index="16" class="submenu-item font" @click="$router.push('/main/corporateGuarantee')">
            <template slot="title">企业担保用户</template>
          </el-menu-item>
          <div class="name-div">
            <div style="padding-top:12px;">借贷管理</div>
          </div>
          <el-menu-item index="17" class="submenu-item font" @click="$router.push('/main/preliminary_loan_review')">
            <template slot="title">借款初审</template>
          </el-menu-item>
          <el-menu-item index="18" class="submenu-item font" @click="$router.push('/main/bidding_management')">
            <template slot="title">招标管理</template>
          </el-menu-item>
          <el-menu-item index="19" class="submenu-item font" @click="$router.push('/main/full_standard_review')">
            <template slot="title">满标复审</template>
          </el-menu-item>
          <el-menu-item index="20" class="submenu-item font" @click="$router.push('/main/loan_management')">
            <template slot="title">借款管理</template>
          </el-menu-item>
          <el-menu-item index="21" class="submenu-item font" @click="$router.push('/main/bid_records')">
            <template slot="title">投标记录</template>
          </el-menu-item>
          <div class="name-div">
            <div style="padding-top:12px;">贷后管理</div>
          </div>
          <el-menu-item index="22" class="submenu-item font" @click="$router.push('/main/pending_collection_management')">
            <template slot="title">待收管理</template>
          </el-menu-item>
          <el-menu-item index="23" class="submenu-item font" @click="$router.push('/main/repayment_management')">
            <template slot="title">还款管理</template>
          </el-menu-item>
          <el-menu-item index="24" class="submenu-item font" @click="$router.push('/main/overdue_management')">
            <template slot="title">逾期管理</template>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="sub-menu3" v-if="index == 3">
        <el-menu active-text-color="#4885f6" text-color="#999999" background-color="#ebedf1">
          <div class="name-div">
            <div style="padding-top:12px;">财务管理</div>
          </div>
          <el-menu-item index="25" class="submenu-item font" @click="$router.push('/main/recharge')">
            <template slot="title">充值记录</template>
          </el-menu-item>
          <el-menu-item index="26" class="submenu-item font" @click="$router.push('/main/withdraw')">
            <template slot="title">提现记录</template>
          </el-menu-item>
          <el-menu-item index="27" class="submenu-item font" @click="$router.push('/main/logs')">
            <template slot="title">资金日志</template>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="sub-menu4" v-if="index == 4">
        <el-menu active-text-color="#4885f6" text-color="#999999" background-color="#ebedf1">
          <div class="name-div">
            <div style="padding-top:12px;">红包管理</div>
          </div>
          <el-menu-item index="27" class="submenu-item font" @click="$router.push('/main/addredEnvelope')">
            <template slot="title">添加红包</template>
          </el-menu-item>
          <el-menu-item index="28" class="submenu-item font" @click="$router.push('/main/redEnvelope')">
            <template slot="title">红包查看</template>
          </el-menu-item>
          <el-menu-item index="29" class="submenu-item font" @click="$router.push('/main/redRecord')">
            <template slot="title">红包记录</template>
          </el-menu-item>
          <div class="name-div">
            <div style="padding-top:12px;">加息券管理</div>
          </div>
          <el-menu-item index="30" class="submenu-item font" @click="$router.push('/main/addVouchers')">
            <template slot="title">加息券详情</template>
          </el-menu-item>
          <el-menu-item index="31" class="submenu-item font" @click="$router.push('/main/vouchersRecord')">
            <template slot="title">加息券记录</template>
          </el-menu-item>
          <div>
            <div class="name-div" style="padding-top:12px;">积分管理</div>
            <el-menu-item index="32" class="submenu-item font" @click="$router.push('/main/points')">
              <template slot="title">用户积分</template>
            </el-menu-item>
            <el-menu-item index="33" class="submenu-item font" @click="$router.push('/main/pointsRecord')">
              <template slot="title">积分记录</template>
            </el-menu-item>
            <el-menu-item index="34" class="submenu-item font" @click="$router.push('/main/goods')">
              <template slot="title">商品管理</template>
            </el-menu-item>
            <el-menu-item index="36" class="submenu-item font" @click="$router.push('/main/goodsRecord')">
              <template slot="title">商品兑换记录</template>
            </el-menu-item>
          </div>
        </el-menu>
      </div>

      <div class="sub-menu5" v-if="index == 5">
        <el-menu active-text-color="#4885f6" text-color="#999999" background-color="#ebedf1">
          <div class="name-div">
            <div style="padding-top:12px;">宣传管理</div>
          </div>
          <el-menu-item index="37" class="submenu-item font" @click="$router.push('/main/consult')">
            <template slot="title">资讯发布</template>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="sub-menu6" v-if="index == 6">
        <el-menu active-text-color="#4885f6" text-color="#999999" background-color="#ebedf1">
          <div class="name-div">
            <div style="padding-top:12px;">权限管理</div>
          </div>
          <el-menu-item index="38" class="submenu-item font" @click="$router.push('/main/department')">
            <template slot="title">部门管理</template>
          </el-menu-item>
          <el-menu-item index="39" class="submenu-item font" @click="$router.push('/main/role')">
            <template slot="title">角色管理</template>
          </el-menu-item>
          <el-menu-item index="40" class="submenu-item font" @click="$router.push('/main/employee')">
            <template slot="title">成员管理</template>
          </el-menu-item>
          <div class="name-div">
            <div style="padding-top:12px;">账户设置</div>
          </div>
          <el-menu-item index="41" class="submenu-item font" @click="$router.push('/main/updatePassword')">
            <template slot="title">密码设置</template>
          </el-menu-item>
        </el-menu>
      </div>
      <div>
        <el-main class="main" id="main">
          <!-- 切换二级路由页面 -->
          <router-view />
        </el-main>
      </div>
    </el-container>
  </div>
</template>

<script>
export default ({
  data() {
    return {
      user: {},
      index: 0,
    }
  },
  mounted() {
    if (localStorage.getItem("user")) {
      this.user = JSON.parse(localStorage.getItem("user"))
      

    }
  },
  methods: {
    handleSelect(index) {
      this.index = index
      let main = document.getElementById("main");
      main.style.marginLeft = "200px"
      main.style.width = "86%"
    },
    logout() {
      this.$confirm('确认退出登录吗?', '确认提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$axios.get("/user/loginOut").then(res => {
          if (res.code == 200) {
            this.$router.push({ path: '/login' })
            this.$message({
              type: 'success',
              message: '退出成功'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    },
  }
})

</script>

<style scoped>
.main-div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 100vh;
  min-width: 100vh;
}

.aside {
  z-index: 1;
  background-color: #333333;
  min-height: 100vh;
  width: 200px;
  position: fixed;

}

.logo {
  width: 50px;
  height: 50px;
  margin-top: 20px;
}

.submenu-item {
  height: 7vh;
  display: flex;
  /* 启用Flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.submenu-item.is-active {
  background: linear-gradient(to right, #ffffff, #ffffff, #ffffff, #ffffff) !important;
}

.menu-item.is-active {
  background: linear-gradient(to right, #222222, #222222, #222222, #222222) !important;
}

.main {
  z-index: 0;
  position: absolute;
  margin-left: 100px;
  background-color: #f0f2f5;
  color: #333;
  width: 93%;
  min-height: 100vh;
}

.name-div {
  background: #f2f2f2;
  height: 50px;
  font-weight: bold;
  display: flex;
  /* 启用Flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.font {
  font-size: 13px;
  font-weight: bold;
}

.sub-menu {
  z-index: 1;
  background: #ebedf1;
  min-height: 100vh;
  width: 120px;
  margin-left: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100px;
  right: 0;
}

.sub-menu::before {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 90px;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color: transparent #ebedf1 transparent transparent;
}

.sub-menu2 {
  z-index: 1;
  background: #ebedf1;
  min-height: 100vh;
  width: 120px;
  margin-left: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100px;
  right: 0;
  height: calc(100% - 50px);
  /* 减去顶部或底部的固定高度 */
  overflow-y: auto;
  /* 添加垂直滚动条 */
}

.sub-menu2::before {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 148px;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color: transparent #ebedf1 transparent transparent;
}

.sub-menu3 {
  z-index: 1;
  background: #ebedf1;
  min-height: 100vh;
  width: 120px;
  margin-left: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100px;
  right: 0;
}

.sub-menu3::before {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 202px;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color: transparent #ebedf1 transparent transparent;
}

.sub-menu4 {
  z-index: 1;
  background: #ebedf1;
  min-height: 100vh;
  width: 120px;
  margin-left: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100px;
  right: 0;
}

.sub-menu4::before {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 260px;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color: transparent #ebedf1 transparent transparent;
}

.sub-menu5 {
  z-index: 1;
  background: #ebedf1;
  min-height: 100vh;
  width: 120px;
  margin-left: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100px;
  right: 0;
}

.sub-menu5::before {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 315px;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color: transparent #ebedf1 transparent transparent;
}

.sub-menu6 {
  z-index: 1;
  background: #ebedf1;
  min-height: 100vh;
  width: 120px;
  margin-left: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100px;
  right: 0;
}

.sub-menu6::before {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 372px;
  border-width: 10px;
  border-style: dashed solid dashed dashed;
  border-color: transparent #ebedf1 transparent transparent;
}
</style>
